<template>
  <section class="item" :class="{ active }">
    <img :src="img" :alt="img" />
  </section>
</template>

<script lang="ts" setup>
defineProps({
  img: {
    type: String,
  },
  active: {
    type: Boolean,
  },
});
</script>

<style lang="scss" scoped>
.item {
  width: 38px;
  height: 38px;
  cursor: pointer;
  overflow: hidden;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 6px;

  &.active {
    box-shadow: 0 3px 8px 0 rgb(255 82 103 / 50%);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
